﻿<!doctype html>
<html lang="en">
<head>
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="0">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>测试</title>
		<link rel="stylesheet" href="static/plugsin/css/font-awesome-4.7.0/css/font-awesome.css">
		<!-- begin::global styles -->
		<link rel="stylesheet" href="static/assets/vendors/bundle.css" type="text/css">
		<!-- end::global styles -->

		<!-- begin::custom styles -->
		<link rel="stylesheet" href="static/assets/css/app.css" type="text/css">
		<link rel="stylesheet" href="static/assets/css/custom.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="static/assets/css/sweetalert.css">
        <script type="text/javascript" src="static/assets/js/sweetalert.js"></script>
    <!-- end::custom styles -->
<style>
    .text-line {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}
.myButton1 {
    box-shadow: 7px 7px 0px -1px #b7eda4;
    background: linear-gradient(to bottom, #2ccf83 5%, #a0d6b2 100%);
    background-color: #2ccf83;
    border-radius: 9px;
    border: 3px solid #50c259;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Courier New;
    font-size: 14px;
    font-weight: bold;
    padding: 12px 15px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #48bd77;

	&:hover {
	background:linear-gradient(to bottom, #a0d6b2 5%, #2ccf83 100%);
	background-color:#a0d6b2;
}
 &:active {
	position:relative;
	top:1px;
}
 }
 .myButton {
	box-shadow: 8px 8px 0px -1px #bbdaf7;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:10px;
	border:4px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Courier New;
	font-size:10px;
	font-weight:bold;
	padding:11px 17px;
	text-decoration:none;
	text-shadow:0px 2px 0px #528ecc;
	&:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
 &:active {
	position:relative;
	top:1px;
}
 }
        #fileInput {
          color: transparent;
        }
        .form-group1 {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .center-align1 {
            display: flex;
            justify-content: center;
        }
            .c1 {
            padding: 5px 5px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
            .column {
            float: left;
            width: 42%;
            padding:20px;
            margin:40px;
        }
            .a{
                width: 400px;
                height:300px;
                padding: 10px;
                border: 2px solid #ccc;
                background-image: url({{ url_for('static', filename='image/file.png') }});
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                border-radius: 5px;
                margin-bottom: 20px;
                margin-top: -10px;
                {#display: none;#}
            }
            .a:hover{
                border: 1px solid red;
                cursor: pointer;
                opacity: 0.5
            }
            .c2{
            padding: 10px 10px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            }
            .contain{
                position:relative;
                width:310px;
                padding-left:25px;
                padding-right:25px;
            }
            #query_Button {
                display: block;
                margin: 0 auto;
            }
            .d{
               border-radius: 5px;
               padding: 10px;
               border: none;
               background-color: #f7f7f7;
            }
            .e{
                border-radius: 5px;
               padding: 10px;
               border: 1px solid;
               background-color: #f7f7f7;
            }
     </style>
</head>
<body>

<!-- begin::page loader-->
<div class="page-loader" id="loading-animation">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

{#<!-- begin::sidebar -->#}
{#<div class="sidebar">#}
{#    <ul class="nav nav-pills nav-justified m-b-30" id="pills-tab" role="tablist">#}
{#        <li class="nav-item">#}
{#            <a class="nav-link" id="notifications-tab" data-toggle="pill" href="#notifications" role="tab"#}
{#               aria-controls="notifications" aria-selected="false">#}
{#                <i class="fa fa-bell"></i>#}
{#            </a>#}
{#        </li>#}
{#        <li class="nav-item">#}
{#            <a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab"#}
{#               aria-controls="settings" aria-selected="false">#}
{#                <i class="ti-settings"></i>#}
{#            </a>#}
{#        </li>#}
{#    </ul>#}
{#    <div class="tab-content" id="pills-tabContent">#}
{#        <div class="tab-pane" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">#}
{#            <div class="tab-pane-body">#}
{#                <h5 class="font-weight-bold m-b-20">Notifications</h5>#}
{#                <div>#}
{#                    <p class="text-muted">Today</p>#}
{#                    <ul class="list-group list-group-flush m-b-10">#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title bg-success rounded-circle">A</span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">#}
{#                                    <span class="badge small badge-danger">New</span>#}
{#                                    New user registration.#}
{#                                </p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">8 minute ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title rounded-circle">#}
{#                                        <i class="fa fa-cloud-upload"></i>#}
{#                                    </span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">Files uploaded successfully.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">50 minute ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div>#}
{#                    <p class="text-muted">Yesterday</p>#}
{#                    <ul class="list-group list-group-flush m-b-10">#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title bg-warning rounded-circle">V</span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">New user registration.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">5 hours ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title rounded-circle">#}
{#                                        <i class="fa fa-file-o"></i>#}
{#                                    </span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">Your invoice prepared.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">10 hours ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title rounded-circle">#}
{#                                        <i class="fa fa-cloud-upload"></i>#}
{#                                    </span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">Files uploaded successfully.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">16 hours ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#            </div>#}
{#            <div class="tab-pane-footer">#}
{#                <a href="#" class="btn btn-primary btn-block">Mark All Read</a>#}
{#            </div>#}
{#        </div>#}
{#        <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">#}
{#            <div class="tab-pane-body">#}
{#                <div class="m-b-30">#}
{#                    <h5 class="font-weight-bold m-b-20">Settings</h5>#}
{#                    <h6 class="font-weight-bold">System</h6>#}
{#                    <ul class="list-group list-group-flush">#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Automatic updates</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>#}
{#                                <label class="custom-control-label" for="customSwitch1"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Current statistics</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>#}
{#                                <label class="custom-control-label" for="customSwitch2"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>User suggestions</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch3" checked>#}
{#                                <label class="custom-control-label" for="customSwitch3"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div class="m-b-30">#}
{#                    <h6 class="font-weight-bold">Accout</h6>#}
{#                    <ul class="list-group list-group-flush">#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Senior account security</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch4">#}
{#                                <label class="custom-control-label" for="customSwitch4"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Account protection</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch5" checked>#}
{#                                <label class="custom-control-label" for="customSwitch5"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div class="m-b-30">#}
{#                    <h6 class="font-weight-bold">Notifications</h6>#}
{#                    <ul class="list-group list-group-flush">#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Browser notifications</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch6">#}
{#                                <label class="custom-control-label" for="customSwitch6"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Mobile notifications</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch7">#}
{#                                <label class="custom-control-label" for="customSwitch7"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Email subscription</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch8">#}
{#                                <label class="custom-control-label" for="customSwitch8"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Sms notifications</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch9" checked>#}
{#                                <label class="custom-control-label" for="customSwitch9"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#            </div>#}
{#            <div class="tab-pane-footer">#}
{#                <a href="#" class="btn btn-primary btn-block">Save Settings</a>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#</div>#}
<!-- end::sidebar -->

<!-- begin::side menu -->
<div class="side-menu">
    <div class='side-menu-body'>
        <ul>
            <li class="side-menu-divider">Navigation</li>
            <li style="margin-bottom: 20px">
                <a href="/upload_train" onclick="clearCacheAndRedirect(event)"><i class="icon ti-files"></i><span style="font-size: large">训练</span> </a>
            </li>
            <li style="margin-bottom: 20px"><a href="/upload_test"><i class="icon ti-file"></i>
                <span style="font-size: large">测试</span>  </a>
            </li>
            <li style="margin-bottom: 20px">
                <a href="/show_result" onclick="clearCacheAndRedirect(event)">
                    <i class="icon ti-layout"></i>
                    <span style="font-size: large">结果可视化</span>
                </a>
            </li>
            <li style="margin-bottom: 20px">
                <a href="/pro_info" onclick="clearCacheAndRedirect(event)"><i class="icon ti-comment-alt"></i>
                    <span style="font-size: large">产品说明</span> </a>
            </li>
            <li style="margin-bottom: 20px">
                <a href="/" onclick="clearCacheAndRedirect(event)">
                    <i class="icon ti-world" ></i>
                    <span style="font-size: large">返回主页</span>
                </a>
            </li>

        </ul>
    </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
    <div class="container-fluid">

        <div class="header-logo">
            <a href="#">
                <img src="static/assets/media/image/team_logo.png" alt="...">
                <span class="logo-text d-none d-lg-block" style="font-family: Aa阳关曲;font-size: x-large">Eyenergy</span>
            </a>
        </div>

        <div class="header-body">
            <ul class="navbar-nav">
                <li class="nav-item dropdown d-none d-lg-block">
                    <a href="#" class="nav-link" data-toggle="dropdown">
                        <i class="fa fa-th-large"></i>
                    </a>
                </li>
            </ul>

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
                        <i class="fa fa-search"></i>
                    </a>
                </li>


            </ul>
        </div>

    </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

	<div class="container-fluid">

		<!-- begin::page header -->
		<div class="page-header d-md-flex justify-content-between align-items-center">
			<h4>测试</h4>
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb m-t-0">
					<li class="breadcrumb-item" style="font-family: 微软雅黑;font-size: 15px">查询搜素结果</li>
					<li class="breadcrumb-item" style="font-family: 微软雅黑;font-size: 15px">单条或批量测试</li>
                    <li class="breadcrumb-item" style="font-family: 微软雅黑;font-size: 15px">下载结果</li>
                    <li class="breadcrumb-item" style="font-family: 微软雅黑;font-size: 15px">删除模型</li>
{#					<li class="breadcrumb-item active" aria-current="page" style="font-family: 微软雅黑;font-size: 15px">下载结果</li>#}
				</ol>
			</nav>
		</div>
		<!-- end::page header -->
		<div class="row">
			<div class="col-md-6">
				<div class="card">
					<div class="card-body">
						<div class="card-header">
							<h5 class="card-title">
								<strong>上传测试集</strong>
								<i style="font-size: small;color: grey;">(支持 <code class="highlighter-rouge">单条或批量</code> 测试)</i>
                                <div style="margin-top: 20px"></div>
                                            <p style="font-size: 15px;margin-bottom: -10px"> [系统可能需要1分钟来完成预测，具体完成时间取
决于测试集大小，请耐心等待...]</p>
							</h5>
							{# <i style="font-size: small;color: grey;">支持 <code class="highlighter-rouge">单条或批量</code> 测试</i>#}
						</div>
						<div class="form-group1">
							<div class="column">
								<div class="text-center mb-3 center-align">
                                    <i class="fa fa-file-excel-o" aria-hidden="true" style="font-size:18px;"><strong>上传测试数据</strong></i></br>
                                    <p>-仅支持上传<code class="highlighter-rouge">[csv]</code>文件-</p>
								</div>
								<div class="center-align1">
									<form action="/upload_test" method="post" enctype="multipart/form-data" onsubmit="return false;">
										{# <i class="fa fa-file-excel-o" aria-hidden="true" style="float:right">上传测试文件</i>#}
										<input type="file" name="test-file" class="a" required >
                                    <div style="text-align: center">
                                        <p>[请选择测试使用的<code class="highlighter-rouge">模型名称</code>]</p>
										{#
										<input type="text" id="model_name" name="model_name" class="result-table">#}
										<select name="model_name" class="e">
											{% for entry in entries %}
											<option style="font-size:15px;font-family:'Times New Roman'" value="{{ entry }}">{{ entry }}</option>
											{% endfor %}
										</select>
                                    <div style="margin-bottom: 20px"></div>
                                    <p>开始测试后可在按钮下方查看<code class="highlighter-rouge">测试集行数</code></p>
										<button type="submit" class="myButton1" style="margin-right:20px" onclick="handleSubmit()">开始测试</button>
										<button type="button" id="download1" class="myButton1">
											<a href='/files_json/{{result}}' download="下载测试结果" style="color:white">下载分类结果</a>
										</button>
                                        <div style="margin-bottom: 20px"></div>
										<div id="file_result"></div>
                                    </div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="card">
					<div class="card-body">
                        <div class="card-header">
							<h5 class="card-title">
								<strong>查看故障排名</strong>
								<i style="font-size: small;color: grey;">(测试 <code class="highlighter-rouge">完毕</code> 后即可点击查询)</i>
							</h5>
							{# <i style="font-size: small;color: grey;">支持 <code class="highlighter-rouge">单条或批量</code> 测试</i>#}
						</div>

						<div class="table-responsive" style="margin-top:20px">

							<button id="query_Button" class="myButton" style="margin-bottom: 20px">查询最新排名</button>
							<table class="table">
								<thead style="border:1px solid; background-color: #f7f7f7;">
									<tr>
										<th scope="col">排名</th>
										<th scope="col">故障种类</th>
										<th scope="col">占比</th>
									</tr>
								</thead>
								<tbody style="border:1px solid; background-color: #FFFFFF;">
									{# <tr>#}
										{# <td>1</td>#}
										{# <td>2</td>#}
										{# <td>17.1%</td>#}
										{# </tr>#}
									{# <tr>#}
										{# <td>2</td>#}
										{# <td>3</td>#}
										{# <td>16.9%</td>#}
										{# </tr>#}
									{# <tr>#}
										{# <td>3</td>#}
										{# <td>1</td>#}
										{# <td>16.6%</td>#}
										{# </tr>#}
									{# <tr>#}
										{# <td>4</td>#}
										{# <td>5</td>#}
										{# <td>16.2%</td>#}
										{# </tr>#}
									{# <tr>#}
										{# <td>5</td>#}
										{# <td>4</td>#}
										{# <td>15.6%</td>#}
										{# </tr>#}
								</tbody>
							</table>
						</div>
					</div>
				</div>
				{# <div class="col-md-6">#}
					<div class="card mt-3">
						<div class="card-body">
                            <div class="card-header">
							<h5 class="card-title">
								<strong>查询分类结果</strong>
                                <i style="font-size: small;color: grey;">(请输入 <code class="highlighter-rouge">测试集样本编号 [自然数]</code>查看对应故障类型) </i>
							</h5>
                            </div>
                            <div style="margin-top: 20px"></div>
							<div class="form-group">
                                <div class="text-center mb-3 center-align">
								<input placeholder="请输入序号" type="number" id="inputData" name="inputData" class="d" required>
								<button type="submit" class="myButton" onclick="getData()">查询结果</button>
                                    <div style="margin-bottom: 5px"></div>
{#                                    <p>0-正常 1-故障1 ...</p>#}
                                <div style="margin-bottom: 20px"></div>

								<div id="result"  ></div>
                                </div>
							</div>
							{# <p>支持<code class="highlighter-rouge">单条或批量</code> 测试</p>#}
						</div>
					</div>
                <div class="card mt-3">
						<div class="card-body">
                            <div class="card-header">
							<h5 class="card-title">
								<strong>删除模型文件</strong>
                                <i style="font-size: small;color: grey;">(请选择对应的 <code class="highlighter-rouge">模型名称</code> 以删除模型)</i>
							</h5>
                            </div>
                            <div style="margin-top: 20px"></div>
							<div class="form-group">
                            <div class="text-center mb-3 center-align">
                            <form action="/delete_model" method="post">
                                <select name="deleteModel" class="e">
											{% for entry in entries %}
											<option style="font-size:15px;font-family:'Times New Roman'" value="{{ entry }}">{{ entry }}</option>
											{% endfor %}
										</select>

								<button type="submit" class="myButton">删除模型</button>
                                <div style="margin-bottom: 20px"></div>
                            {% if success_msg %}
                                <p>{{ success_msg }}</p>
                            {% endif %}
                            </form>
                            </div>
							</div>
							{# <p>支持<code class="highlighter-rouge">单条或批量</code> 测试</p>#}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>

</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
{#<script src="static/assets/js/custom.js"></script>#}
<script src="static/assets/js/app.js"></script>
<!-- end::custom scripts -->
<script>
          function isNaturalNumber(value) {
          // 使用正则表达式判断是否为自然数
             if(value==='0') return true;
             var naturalNumberRegex = /^[1-9]\d*$/;
             return naturalNumberRegex.test(value);
        }
            function getData() {

            var inputData = document.getElementById('inputData').value;  // 获取用户输入的数据
                if (!isNaturalNumber(inputData)) {
                    // 如果输入数据不是自然数，则输出警告信息
                    {#document.getElementById('result').innerText = '输入数据必须为自然数！';#}
                    {#alert("查询输入结果的输入数据必须为自然数！！！");#}
                    var element = document.getElementById('result');
                    element.innerText = "请输入自然数！";
                    element.style.color = 'red';
                    return;
                  }
            fetch('/get_data?data=' + inputData)
                .then(response => response.text())
                .then(data => {
                    // 处理后端返回的数据，将其显示在页面上
                    {#document.getElementById('result').innerText = data;#}
                    var element = document.getElementById('result');
                    element.innerText = data;
                    if(data[0]==='输') element.style.color = 'red';
                    else element.style.color = 'grey';
                });
        }

 var fileResult = ''; // 初始化全局变量 fileResult

window.addEventListener('load', function () {
  var storedFileResult = localStorage.getItem('fileResult');
  if (storedFileResult) {
    fileResult = storedFileResult;
  }
  updateFileResult(); // 更新页面显示的文字
});

function getFile() {
  var fileInput = document.querySelector('input[type="file"]');
  var file = fileInput.files[0]; // 获取用户选择的文件

  var formData = new FormData();
  formData.append('file', file); // 将文件添加到 FormData 对象中

  fetch('/get_file', {
    method: 'POST',
    body: formData,
  })
    .then((response) => response.text())
    .then((data) => {
      fileResult = data;
      localStorage.setItem('fileResult', fileResult);
      updateFileResult();
      {#location.reload();#}
    }
    {#return false;#}
    );
}

function updateFileResult() {
  // 将全局变量中的数据显示在页面上
  document.getElementById('file_result').textContent = fileResult;
}
function handleSubmit() {
  // 创建 XMLHttpRequest 对象
    var File = document.querySelector('input[name="test-file"]');
    if(File.files.length==0) return;
  var xhr = new XMLHttpRequest();

  // 设置请求完成时的回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        document.getElementById('loading-animation').style.display = 'none';
        {#location.reload();#}
        if(xhr.status === 200){
            // 表单提交到后端的处理已完成
              // 执行 getFile() 操作
              {#alert("测试已完成");#}
                        swal({
                title:  "测试已完成!" ,
                text:  null ,
                icon:  "success" ,
                buttons:{
                    OK:true,
                },
            }).then(function(OK) {
                if (OK) {
                    window.location.reload();
                }
            });

              getFile();
              return;
        }
        else{
            {#alert("您上传的测试集csv文件不合法");#}
                        swal({
                title:  "您上传的测试集csv文件不合法" ,
                text:  null ,
                icon:  "error" ,
                buttons:{
                    OK:true,
                },
            }).then(function(OK) {
                if (OK) {
                    window.location.reload();
                }
            });

            {#location.reload();#}
        }

    }
  };
  // 提交表单

              var loadingAnimation = document.getElementById('loading-animation');
  loadingAnimation.style.display = 'block';
{#loadingAnimation.style.position = 'fixed';#}
loadingAnimation.style.top = '50%';
loadingAnimation.style.left = '50%';
loadingAnimation.style.backgroundColor = 'transparent';
  xhr.open('POST', '/upload_test', true);
  xhr.send(new FormData(document.querySelector('form')));
}
</script>

<script>
document.getElementById("query_Button").addEventListener("click", function() {
    fetch("/get_table") // 向后端发送请求
        .then(response => response.json()) // 解析响应为JSON格式
        .then(data => {
            // 根据后端返回的data字典更改表格内容
            let tableBody = document.querySelector(".table tbody");
            tableBody.innerHTML = ""; // 清空表格内容
            data.labels.forEach((label, index) => {
                let row = document.createElement("tr");
                row.innerHTML = `<td>${index + 1}</td><td>${label}</td><td>${data.counts[index]}</td>`;
                tableBody.appendChild(row);
            });
        })
        .catch(error => console.log(error));
});

</script>
<script>

  function clearCacheAndRedirect(event) {
    // 清空缓冲区代码
    localStorage.removeItem('fileResult');

    // 执行其他操作，例如页面重定向
    window.location.href = event.target.href;

    // 取消默认行为
    {#event.preventDefault();#}
  }
</script>
</body>
</html>